<template>
  <view>
    <u-navbar title="我的钱包" back-icon-size="34" title-size="36" :border-bottom="false"></u-navbar>
    <view
      class=""
      style="
        margin: 28rpx;
        border-radius: 28rpx;
        padding-bottom: 40rpx;
        background: url(https://wenzhen.fuerle168.com/static/shop/user/mymoney.png) no-repeat;
        background-size: 100% 100%;
        height: 390rpx;
      "
    >
      <view class="" style="font-size: 32rpx; color: #fff; padding-top: 141rpx; padding-left: 33rpx">余额(元）</view>
      <view class="" style="font-size: 46rpx; font-weight: bold; color: #fff; padding-left: 30rpx; padding-top: 35rpx">
        {{ money }}
      </view>
      <view class="" style="display: flex; justify-content: flex-end; margin-right: 41rpx">
        <view class="btn" @tap="tx">充值</view>
      </view>
    </view>
    <view class="" style="font-size: 34rpx; font-weight: bold; padding-left: 42rpx; padding-bottom: 40rpx">余额明细</view>
    <view
      class=""
      style="
        margin: 0rpx 41rpx;
        border-bottom: 1rpx solid #dddddd;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 39rpx;
        padding-top: 15rpx;
        background: #fff;
      "
      v-for="(i, k) in list"
      :key="k"
    >
      <view class="">
        <view class="" style="font-size: 26rpx; color: #f3a715">
          {{ i.memo }}
        </view>
        <view class="" style="font-size: 26rpx; color: #666666; padding-top: 32rpx">
          {{ i.createtime }}
        </view>
      </view>
      <view class="">
        <view class="" style="font-size: 36rpx; font-weight: bold; color: #e50014">{{ i.type == 1 ? '+' : '-' }}{{ i.money }}</view>
        <view class="" style="font-size: 26rpx; color: #666; padding-top: 32rpx">余额：{{ i.after }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      money: '',
      page: 1
    };
  },
  methods: {
    tx() {
      uni.navigateTo({
        url: '/shop/cz/cz'
      });
    },
    qian() {
      this.api({
        url: '/api/shop/getMoneyLog',
        method: 'post',
        data: {
          page: this.page
        }
      }).then((res) => {
        this.list = this.list.concat(res.data);
        this.page++;
      });
    },
    user() {
      this.api({
        url: '/api/shop/home',
        method: 'post'
      }).then((res) => {
        this.money = res.data.money;
      });
    }
  },
  onShow() {
    this.qian();
    this.user();
  }
};
</script>

<style>
.btn {
  width: 160rpx;
  height: 66rpx;
  background: #ffffff;
  box-shadow: 0px 6rpx 16rpx 0px rgba(185, 33, 47, 0.5);
  border-radius: 33rpx;
  text-align: center;
  line-height: 66rpx;
  font-size: 30rpx;
  color: #f13545;
}
</style>
